<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
//http://localhost:8080/logistics/
%>
<!DOCTYPE HTML>
<html>
<head>
<!-- 设置页面的 基本路径，页面所有资源引入和页面的跳转全部基于 base路径 -->
<base href="<%=basePath%>">

<link rel="stylesheet" href="lib/zTree/v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="lib/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="lib/zTree/v3/js/jquery.ztree.all-3.5.min.js"></script>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<button onclick="getCheckedData();" type="button">获取选中的数据</button>




<ul id="permissionTree" class="ztree"></ul>


</body>

<script type="text/javascript">
//获取zTree选中的数据
function getCheckedData(){
	
	//获取zTree对象 ，（不是jquery的id选择的器，没有 #）
	var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
	
	//获取所有选中的节点
	var nodes = treeObj.getCheckedNodes(true);
	//声明一个数组，存放节点的id
	var permissionIdsArr = [];
	for(var i=0;i<nodes.length;i++){
		var node = nodes[i];
		//将节点id添加到数组中
		permissionIdsArr.push(node.permissionId);
	}
	
	console.log(permissionIdsArr);
	/*
		将数组转换成字符串 :
			1,toString方法自定将数组以逗号分割转换成字符串
			2,join("连接符")方法将数组以分割转换成字符串
	*/
	//var permissionIdsStr = permissionIdsArr.toString();
	var permissionIdsStr = permissionIdsArr.join(",");
	
	
	console.log(permissionIdsStr);
}


	//1.zTree 设置 默认为控
	var setting = {
		check: {enable: true},
		data: {
			simpleData: {
				enable: true,
				pIdKey:'parentId',
				idKey:'permissionId'
			}
		},
		//异步加载
		async:{
			enable: true,
			url:'permission/getAllPermission.do',
			//异步加载过滤设置：在zTree渲染之前过滤
			dataFilter: filter
		},
		//异步加载完毕以后回调函数
		callback: {
			onAsyncSuccess: zTreeOnAsyncSuccess
		}
		
	};
	
	/* 
		异步加载完毕以后回调的函数
		在此函数内部完成权限数据的回显
		
		思路：
		1，拆分后台共享的当前角色对应的权限id的字符串
		var permissionIds = "${role.permissionIds}"
		var permissionIds = "58,57,74,75,76,77,31,32,33,34,35"
		
		var permissionIdsArr = permissionIds.split(",");
		
		
		2,获取zTree对象，并根据zTree的一个根据属性的值获取节点的方法（当前场景，根据permissionId的值获取节点）
		
		3,让其第二步获取的对应的节点选中即可（完成数据库回显）
		
		
	*/
	
	function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		//1，拆分后台共享的当前角色对应的权限id的字符串
		var permissionIds = "58,57,74,75,76,77,31,32,33"
		var permissionIdsArr = permissionIds.split(",");
		console.log(permissionIdsArr);
		
		//2,获取zTree对象，并根据zTree的一个根据属性的值获取节点的方法（当前场景，根据permissionId的值获取节点）
		var treeObj = $.fn.zTree.getZTreeObj("permissionTree");
		
		for(var i = 0 ;i<permissionIdsArr.length;i++){
			//获取指定permissionId属性值的节点
			var node = treeObj.getNodeByParam("permissionId", permissionIdsArr[i], null);
			console.log(node);
			
			//让其节点选中
			treeObj.checkNode(node, true, false);
		}
		
	};
	
	
	//异步加载数据完毕以后过滤函数，可以在此函数中过滤器原有的数据或者在原有数据上新增数据
	function filter(treeId, parentNode, childNodes) {
		
		//循环出所有数据，并且新增一个open属性
		for (var i=0;i<childNodes.length;i++) {
			var childNode = childNodes[i];
			childNode.open=true;
		}
		return childNodes;
	}


	$(function(){
		//初始化zTree
		$.fn.zTree.init($("#permissionTree"), setting);
	});


</script>

</html>